<template>
  <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
    :autoExpandParent="autoExpandParent" :defaultExpandAll="defaultExpandAll" :checkable="checkable"
    :field-names="props.fieldNames" :selectable="selectable" :load-data="onLoadData" :tree-data="treeDatas"
    :height="height" />
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import Treeprops from "./treeConfig/props";
//interface
interface DataList {
  [propName: string | number]: any;
}
//props
const props = defineProps(Treeprops);
//emits
const emit = defineEmits(["submit"]);
//data
const treeDatas = ref(props.treeData); //tree 数据
const expandedKeys = ref<string[]>([]); // 展开行的key值列表
const selectedKeys = ref<string[]>([]); // 选中行的key值列表（整行）
const checkedKeys = ref<string[]>([]); // 单选行的key值列表（单选框）
//watch
watch([expandedKeys, selectedKeys, checkedKeys], () => {
  console.log('expandedKeys', expandedKeys);
  emit('submit', { expandedKeys, selectedKeys, checkedKeys })
});

// methods
const onLoadData = (treeNode: DataList) => {
  return new Promise(resolve => {
    if (treeNode.dataRef.children) {
      resolve(true);
      return;
    }
    setTimeout(() => {
      treeNode.dataRef.children = [{ name: 'Child Node', id: `${treeNode.eventKey}-0` }, { name: 'Child Node', id: `${treeNode.eventKey}-1` }];
      treeDatas.value = [...treeDatas.value];
      resolve(true);
    }, 1000);
  });
};
</script>

<style>

</style>
